<template>
  <div id="app" class="home">
    <!-- <img src="./image/shouye_icon_chapihao.png" alt=""> -->
    <router-view/>
      <van-tabbar v-model="active">
          <van-tabbar-item 
          v-for="(item,index) in tabbar"
          :key="index"
          :to="item.path"  
          :icon="item.icon">
          {{item.title}}
          </van-tabbar-item>
      </van-tabbar>
  </div>
</template>
<script>
export default {
  name: 'HomeView',
  data() {
    return {
      active: 0,
      tabbar:[
                {
                    path:'/home/index',
                    icon:'home-o',
                    title:'首页',
                    active:0
                },
                {
                    path:'/home/find',
                    icon:'bulb-o',
                    title:'发现',
                    active:1
                },
                {
                    path:'/home/release',
                    icon:'add-o',
                    title:'发布',
                    active:2,
                    badge:true
                },
                {
                    path:'/home/customized',
                    icon:'newspaper-o',
                    title:'定制',
                    active:3
                },
                {
                    path:'/home/my',
                    icon:'manager-o',
                    title:'我的',
                    active:4
                },
            ]
    };
  },
  methods:{
    
  },
  created() {
    this.active = this.tabbar.filter(item => item.path === this.$route.path)[0].active
  },
  
  
}
</script>
<style scoped>
/* .van-hairline--top-bottom{
  background: rgba(255, 0, 0, 0);
} */
  .van-tabbar{
    /* background-color: #eee; */
    width: 46.875rem;
    height:100px;
  }
  .van-tabbar-item{
    font-size: 1.5rem;
    /* background: red; */
  }
  
  .van-tabbar-item__icon{
    font-size: 1.5rem;
    /* color: red; */
  }
</style>
